/**
 * @Description: 用户表
 * @author ourslookAdmin
 * @date 2019-04-30 12:07:58
 */
import React, { Fragment } from 'react';
import {
  Button,
  Card,
  Checkbox,
  Col,
  Divider,
  Form,
  Input,
  InputNumber,
  Radio,
  Row,
  Select,
  Spin,
  Avatar,
  Tag,
  TreeSelect,
  Switch,
  BackTop,
  Upload,
  Icon,
  Tooltip,
} from 'antd/lib/index';
import { formatMessage, FormattedMessage } from 'umi/locale';
import Modal from 'drag-modal';
import 'antd/dist/antd.css';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { requestLists, requestPromise } from '@/utils/request';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import BaseForm from '../../../components/ourslook/BaseForm';
import ETable from '../../../components/ourslook/ETable';
import DefaultImage from '../../../components/ourslook/DefaultImage';
import { getWebPath } from '../../../utils/request';
import uiUtils, { hasPermission, rulesReg, rulesRemote } from '../../../utils/uiUtils';
import styles from '../../../utils/ourslook.less';
import coming from '@/decorator/coming';

const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;
const TextArea = Input.TextArea;
const Password = Input.Password;
const CheckboxGroup = Checkbox.Group;

const getValue = obj =>
  Object.keys(obj)
    .map(key => obj[key])
    .join(',');

// @coming({title: '精彩即将呈现！', value: Date.now() + 1000 * 60 * 60 * 24 * 2})
@connect(() => ({}))
class tbuser extends React.Component {
  params = {
    page: 1,
    limit: 10,
  };

  formItemLayout = {
    labelCol: { span: 5 },
    wrapperCol: { span: 19 },
  };

  /**
   * https://ant-design.gitee.io/components/table-cn/
   *
   * 需要指定 column 的 width 属性，否则列头和内容可能不对齐。（必须留一列不设宽度或者minWidth以适应弹性布局）
   * 建议指定 scroll.x 为大于表格宽度的固定值或百分比。注意，且非固定列宽度之和不要超过 scroll.x, 一般无table正常展开的宽度
   * 未知长度字段或者字符特别多的字段不要放置在列表
   */
  columns = [
    {
      title: '',
      width: 30,
      align: 'center',
      fixed: 'left',
      render: (value, record, index) => index + 1,
    },
    {
      title: '用户Id',
      dataIndex: 'userId',
      width: 80,
      align: 'center',
      fixed: 'left',
      sorter: false,
      key: 'user_id',
    },
    {
      title: '用户昵称(微信昵称)',
      dataIndex: 'username',
      width: 140,
      align: 'center',
      sorter: false,
      key: 'username',
    },
    {
      title: '手机号',
      dataIndex: 'mobile',
      width: 140,
      align: 'center',
      sorter: false,
      key: 'mobile',
    },
    // {
    //   title: '用户类型，参常量：UserTypes；1：商家用户21：普通用户；22：普通用户-负责人团队；23：普通用户-合伙人团队；24:普通用户-楼栋长团队',
    //   dataIndex: 'userTypes',
    //   width: 120,
    //   align: 'center',
    //   sorter: false,
    //   key: 'user_types'
    // },
    {
      title: '用户头像(微信头像)',
      dataIndex: 'headPortraitImg',
      align: 'center',
      width: 100,
      sorter: false,
      key: 'head_portrait_img',
      render: (value, record) => <DefaultImage src={record.headPortraitImg} alt={record} title={record} />,
    },
    {
      title: '注册时间',
      dataIndex: 'createTime',
      align: 'center',
      sorter: true,
      key: 'create_time',
    },
    // {title: '个人简介', dataIndex: 'signature', width: 120, align: 'center', sorter: false, key: 'signature'},
    // {title: '状态', dataIndex: 'status', width: 120, align: 'center', sorter: false, key: 'status'},
    {
      title: '状态',
      dataIndex: 'status',
      width: 150,
      align: 'center',
      fixed: 'right',
      render: (value, record, index) => (
        <React.Fragment>
          <div>
            <Switch
              checkedChildren="启用"
              unCheckedChildren="禁用"
              onChange={val => {
                this.setStateByTableColume(record, index);
                this.updateStatus(val);
              }}
              checked={value === 1}
            />
          </div>
        </React.Fragment>
      ),
    },
    {
      title: '操作',
      dataIndex: '',
      width: 80,
      align: 'center',
      fixed: 'right',
      render: (value, record, index) => (
        <React.Fragment>
          <a
            hidden={!hasPermission('user:update')}
            onClick={() => {
              this.setStateByTableColume(record, index);
              this.update();
            }}
          >
            <Tooltip title={<FormattedMessage id="ours.curd.list.edit" defaultMessage="编辑" />}>
              <Icon type="edit" />
            </Tooltip>
          </a>
          <Divider hidden={record.status === 0} type="vertical" />
          <a
            hidden={!hasPermission('user:info')}
            onClick={() => {
              this.setStateByTableColume(record, index);
              this.view();
            }}
          >
            <Tooltip title={<FormattedMessage id="ours.curd.list.info" defaultMessage="查看" />}>
              <Icon type="info" />
            </Tooltip>
          </a>
        </React.Fragment>
      ),
    },
  ];

  constructor(props) {
    super(props);
    this.state = {
      showList: 1, //1:显示列表、2:显示新增
      formList: tbuser.getFormList(),
      selectedRows: [],
      selectedIds: [],
      selectedIndexs: [],
      editModalTitle: null,
      editModalType: null,
      editModel: null,
      editModelConfirmLoading: false,
      //其他属性下面书写
    };
  }

  // 筛选条件
  static getFormList = () => [
    {
      type: 'INPUT',
      field: 'username',
      label: '用户昵称',
      placeholder: '用户昵称',
    },
    {
      type: 'INPUT',
      field: 'mobile',
      label: '手机号',
      placeholder: '手机号',
    },
    {
      type: 'DATE_RANGE',
      field: 'createTime',
      label: '注册时间',
      placeholder: ['注册时间', ''],
    },
    {
      type: 'SELECT',
      field: 'status',
      label: '状态',
      placeholder: '状态',
      initialValue: '',
      list: [{ id: '', name: '请选择状态' }, { id: '1', name: '正常' }, { id: '0', name: '暂停' }],
    },
    //下面是各种组件的示例代码，不用 请删除不需要的代码和注释
  ];

  componentDidMount() {
    this.requestList();
  }

  componentWillUnmount() {}

  /**
   * 根据 formItem field 取值 查找formItem
   * @param formItemField obj的field字段
   * @returns 一个对象
   */
  findFormListItemByField = formItemField =>
    this.state.formList.find((value, index, array) => value.field === formItemField);

  query = fieldParams => {
    this.params = JSON.parse(JSON.stringify(Object.assign(this.params, fieldParams)));
    this.requestList();
  };

  add = () => {
    this.setState({
      editModalType: 'add',
      editModalTitle: formatMessage({ id: 'ours.curd.list.create' }), //创建
      editModel: {},
      showList: 2,
    });
  };

  update = () => {
    const { selectedRows, selectedIds, selectedIndexs } = this.state;
    if (!selectedRows) {
      uiUtils.showAlert(formatMessage({ id: 'ours.curd.show-alert.select-please' }));
      return;
    }
    if (selectedRows.length > 1) {
      uiUtils.showAlert(formatMessage({ id: 'ours.curd.show-alert.select-one-please' }));
      return;
    }
    this.setState({
      editModalType: 'update',
      editModalTitle: <FormattedMessage id="ours.curd.list.edit" defaultMessage="编辑" />,
      editModel: JSON.parse(JSON.stringify(selectedRows[0])),
      showList: 2,
    });
    this.getInfo(selectedRows[0].userId);
  };

  view = () => {
    const { selectedRows, selectedIds, selectedIndexs } = this.state;
    if (!selectedRows) {
      uiUtils.showAlert(formatMessage({ id: 'ours.curd.show-alert.select-please' }));
      return;
    }
    if (selectedRows.length > 1) {
      uiUtils.showAlert(formatMessage({ id: 'ours.curd.show-alert.select-one-please' }));
      return;
    }
    this.setState({
      editModalType: 'view',
      editModalTitle: <FormattedMessage id="ours.curd.list.info" defaultMessage="查看" />,
      editModel: selectedRows[0],
      showList: 2,
    });
    this.getInfo(selectedRows[0].userId);
  };

  del = () => {
    const selectedRows = this.state.selectedRows;
    const userIds = [];
    for (let i = 0; i < selectedRows.length; i += 1) {
      userIds.push(selectedRows[i].userId);
    }

    uiUtils.showConfirm(formatMessage({ id: 'ours.curd.show-alert.confirm-delete' }), () => {
      this.setState({
        loading: true,
      });
      requestPromise(`${getWebPath()}user/delete`, {
        method: 'POST',
        body: userIds,
      }).then(res => {
        this.setState({
          loading: false,
        });
        if (res && res.code === 0) {
          uiUtils.showMessage(
            formatMessage({ id: 'ours.curd.show-alert.operate-success' }),
            'success'
          );
          this.requestList();
        }
      });
    });
  };

  saveOrUpdate = () => {
    const editModalType = this.state.editModalType;
    //不能双向绑定，这里只能原对象、新对象进行合并.
    const user = Object.assign(this.state.editModel, this.editForm.props.form.getFieldsValue());

    this.editForm.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        // submit the values
        const url = user.userId == null ? '/user/save' : '/user/update';
        //对象删除一个属性
        //delete user.xxxxPros;

        this.setState({
          editModelConfirmLoading: true,
        });
        requestPromise(getWebPath() + url, {
          method: 'POST',
          body: user,
        }).then(res => {
          this.setState({
            editModelConfirmLoading: false,
          });
          if (res && res.code === 0) {
            uiUtils.showMessage(
              formatMessage({ id: 'ours.curd.show-alert.operate-success' }),
              'success'
            );
            this.setState({
              showList: 1,
            });

            //新增重新置为第一页
            if (!user.userId) {
              this.params.page = 1;
            }
            this.requestList();
          }
        });
      }
    });
  };

  updateStatus = val => {
    const { selectedRows, selectedIds, selectedIndexs } = this.state;
    if (!selectedRows) {
      uiUtils.showAlert(formatMessage({ id: 'ours.curd.show-alert.select-please' }));
      return;
    }
    if (selectedRows.length > 1) {
      uiUtils.showAlert(formatMessage({ id: 'ours.curd.show-alert.select-one-please' }));
      return;
    }
    let status;
    if (val) {
      status = 1;
    } else {
      status = -1;
    }
    const ids = [];
    for (let i = 0; i < selectedRows.length; i += 1) {
      ids.push(selectedRows[i].userId);
    }

    this.setState({
      loading: true,
    });
    //const data = 'modelIds=' + ids.join(',') + '&status=' + status;
    const data = {
      modelIds: ids.join(','),
      status,
    };
    requestPromise(`${getWebPath()}user/operateuserByUserIds`, {
      method: 'POST',
      contentType: 'application/x-www-form-urlencoded',
      body: data,
    }).then(res => {
      this.setState({
        loading: false,
      });
      if (res && res.code === 0) {
        uiUtils.showMessage(
          formatMessage({ id: 'ours.curd.show-alert.operate-success' }),
          'success'
        );
        this.requestList();
      }
    });
  };

  getInfo = userId => {};

  setStateByTableColume = (record, index) => {
    this.state = {
      ...this.state,
      selectedRows: [record],
      selectedIds: [record.userId],
      selectedIndexs: [index],
    };
  };

  operateByIds = status => {
    //这里处理，发布、取消发布、删除、禁用等状态操作; 参数status由调用放传入
    // const {selectedRows, selectedIds, selectedIndexs} = this.state;
    // const ids = [];
    // for (let i = 0; i < selectedRows.length; i += 1) {
    //   ids.push(selectedRows[i].userId);
    // }
    //
    // /* eslint-disable no-param-reassign */
    // status = !status ? 3 : status;
    // let tips = "请确定是否要进行操作??????";
    // let msgIds = null;
    // if (status === 2) {
    //   msgIds = 'ours.curd.show-alert.confirm-publish';//发布
    // } else if (status === 3) {
    //   msgIds = 'ours.curd.show-alert.confirm-delete';//删除
    // } else if (status === 1) {
    //   tips = "请选择要撤消选中项吗？";
    //   msgIds = 'ours.curd.show-alert.confirm-enable';//启用
    // } else if (status === -1) {
    //   msgIds = 'ours.curd.show-alert.confirm-disable';//禁用
    // }
    //
    // uiUtils.showConfirm(formatMessage({id: msgIds}), () => {
    //   this.setState({
    //     loading: true,
    //   });
    //   //const data = 'modelIds=' + ids.join(',') + '&status=' + status;
    //   const data = {
    //     modelIds: ids.join(','),
    //     status: status,
    //   };
    //   requestPromise(`${getWebPath()}user/operateuserByUserIds`, {
    //     method: 'POST',
    //     contentType: "application/x-www-form-urlencoded",
    //     body: data,
    //   }).then(res => {
    //     this.setState({
    //       loading: false,
    //     });
    //     if (res && res.code === 0) {
    //       uiUtils.showMessage(
    //         formatMessage({id: 'ours.curd.show-alert.operate-success'}),
    //         'success'
    //       );
    //       this.requestList();
    //     }
    //   });
    // });
  };

  exportsAllToExcel = (isExcel, deliveryMonth) => {
    let params = JSON.parse(JSON.stringify(this.params));

    //如果是是导出代发货信息，这里简单处理一下, 全都是代发货数据
    if (deliveryMonth !== undefined && deliveryMonth !== null && deliveryMonth !== '') {
      params = JSON.parse(JSON.stringify(Object.assign(params, { statusOrder: 1 })));
    }

    const data = `searchParams=${encodeURIComponent(JSON.stringify(params))}&isCvs=${
      isExcel ? 'false' : 'true'
    }&deliveryMonth=${deliveryMonth}`;
    window.location.href = `${getWebPath()}user/exportsExcelAll?${data}`;
  };

  //========其他所有的处理方法，请在按照约定进行处理==========

  /**
   * 表格 筛选和排序 回调
   */
  filtersSorterChange = tableParams => {
    this.params = JSON.parse(JSON.stringify(Object.assign(this.params, tableParams)));
    this.requestList();
  };

  requestList = () => {
    requestLists(this, `${getWebPath()}user/list`, this.params);
  };

  vShow = showListNum => ({ display: this.state.showList === showListNum ? 'block' : 'none' });

  render() {
    const style = {
      style: {
        marginLeft: 10,
        marginTop: 10,
      },
      disabled: this.state.selectedIndexs.length <= 0,
    };

    /* eslint-disable react/jsx-no-bind */
    return (
      <PageHeaderWrapper title="">
        <Card
          bordered={false}
          style={{ ...this.vShow(1) }}
          className={styles.oursCard}
          bodyStyle={{ padding: '20px' }}
        >
          <BaseForm
            formList={this.state.formList}
            loading={this.state.loading}
            filterSubmit={this.query}
          />

          <Fragment>
            {/*<Button*/}
            {/*  type="primary"*/}
            {/*  icon="plus"*/}
            {/*  onClick={this.add}*/}
            {/*  hidden={!hasPermission('user:save')}*/}
            {/*>*/}
            {/*  <FormattedMessage id="ours.curd.list.add" defaultMessage="新增"/>*/}
            {/*</Button>*/}
            {/*<Button*/}
            {/*  type="primary"*/}
            {/*  icon="edit"*/}
            {/*  {...style}*/}
            {/*  onClick={this.update}*/}
            {/*  hidden={!hasPermission('user:update')}*/}
            {/*>*/}
            {/*  <FormattedMessage id="ours.curd.list.update" defaultMessage="修改"/>*/}
            {/*</Button>*/}
            {/*<Button*/}
            {/*  type="primary"*/}
            {/*  icon="info-circle"*/}
            {/*  {...style}*/}
            {/*  onClick={this.view}*/}
            {/*  hidden={!hasPermission('user:info')}*/}
            {/*>*/}
            {/*  <FormattedMessage id="ours.curd.list.info" defaultMessage="查看"/>*/}
            {/*</Button>*/}
            <Button
              type="primary"
              icon="download"
              loading={this.state.downloadBtnLoading}
              onClick={() => {
                this.setState({
                  downloadBtnLoading: true,
                });
                this.exportsAllToExcel(true);
                //这里延迟5s关闭loading
                setTimeout(() => {
                  this.setState({
                    downloadBtnLoading: false,
                  });
                }, 1000 * 5);
              }}
              hidden={!hasPermission('user:list')}
            >
              <FormattedMessage id="ours.curd.list.export" defaultMessage="导出" />
            </Button>
            <Button
              type="danger"
              icon="delete"
              {...style}
              onClick={this.del}
              hidden={!hasPermission('user:delete')}
            >
              <FormattedMessage id="ours.curd.list.delete" defaultMessage="删除" />
            </Button>
            {/*<Button*/}
            {/*  type="default"*/}
            {/*  icon="info-circle"*/}
            {/*  {...style}*/}
            {/*  onClick={this.operateByIds(2)}*/}
            {/*  hidden={!hasPermission('user:update')}*/}
            {/*>*/}
            {/*  <FormattedMessage id="ours.curd.list.publish" defaultMessage="发布"/>*/}
            {/*</Button>*/}
            {/*<Button*/}
            {/*  type="default"*/}
            {/*  icon="info-circle"*/}
            {/*  {...style}*/}
            {/*  onClick={this.operateByIds(1)}*/}
            {/*  hidden={!hasPermission('user:update')}*/}
            {/*>*/}
            {/*  <FormattedMessage id="ours.curd.list.enable" defaultMessage="启用"/>*/}
            {/*</Button>*/}
            {/*<Button*/}
            {/*  type="default"*/}
            {/*  icon="info-circle"*/}
            {/*  {...style}*/}
            {/*  onClick={this.operateByIds(-1)}*/}
            {/*  hidden={!hasPermission('user:update')}*/}
            {/*>*/}
            {/*  <FormattedMessage id="ours.curd.list.disable" defaultMessage="禁用"/>*/}
            {/*</Button>*/}
          </Fragment>

          <div className="content-wrap">
            <ETable
              onSelectRow={uiUtils.onSelectRow.bind(this)}
              primaryKey="user_id"
              selectedRows={this.state.selectedRows}
              selectedIds={this.state.selectedIds}
              selectedIndexs={this.state.selectedIndexs}
              onChange={this.filtersSorterChange}
              columns={this.columns}
              dataSource={this.state.list}
              pagination={this.state.pagination}
              loading={this.state.loading}
              scroll={{ x: 900 }}
            />
          </div>
        </Card>

        <BackTop />

        <Spin spinning={this.state.editModelConfirmLoading} delay={10}>
          {//返回null,这里对不用的组件进行销毁
          this.state.showList === 1 ? null : (
            <Card
              title={this.state.editModalTitle}
              bordered={false}
              actions={[
                <div>
                  <React.Fragment>
                    <Button
                      type="primary"
                      hidden={this.state.editModalType === 'view'}
                      style={{ marginRight: '18px' }}
                      onClick={this.saveOrUpdate}
                    >
                      <FormattedMessage id="ours.curd.add.save" defaultMessage="保存" />
                    </Button>
                    <Button
                      style={{ marginRight: '18px' }}
                      onClick={() => {
                        this.editForm.props.form.resetFields();
                        this.setState({ showList: 1 });
                      }}
                    >
                      <FormattedMessage id="ours.curd.add.back" defaultMessage="返回" />
                    </Button>
                  </React.Fragment>
                </div>,
              ]}
              style={{ ...this.vShow(2) }}
              bodyStyle={{ padding: '20px' }}
              ref={node => {
                this.container = node;
              }}
            >
              <EditForm
                type={this.state.editModalType}
                model={this.state.editModel}
                wrappedComponentRef={inst => {
                  this.editForm = inst;
                }}
              />
            </Card>
          )}
        </Spin>
      </PageHeaderWrapper>
    );
  }
}

export default tbuser;

/**
 *  新增、编辑、复制、查看的Form
 */

/* eslint react/no-multi-comp:0 */
class EditForm extends React.Component {
  static propTypes = {
    type: PropTypes.string, //form类型，可选值：add（增加）、update（修改）、copy（复制）、view（查看）、
    model: PropTypes.object, //数据模型model，对应后台的model
  };

  static defaultProps = {
    type: '', //表单布局数组
    model: null,
  };

  constructor(props) {
    super(props);
    const defaultImgList = this.props.model.headPortraitImg
      ? [
          {
            uid: '1',
            name: '',
            status: 'done',
            url: this.props.model.headPortraitImg,
          },
        ]
      : null; //defaultFileList
    this.state = {
      previewImgVisible: false, //上传文件预览
      previewImg: '', //上传文件预览
      defaultImgList, //上传文件列表
      imgList: defaultImgList && defaultImgList.length > 0 ? [defaultImgList[0]] : [],
    };
  }

  /**
   * 生命周期-属性发生变化...componentWillReceiveProps
   * 这里的nextProps，可以获取到所有的属性。
   * 目前没用，因为 dialog 每次都被销毁了
   */
  componentWillReceiveProps(nextProps) {
    if (nextProps.model) {
      // this.state = {};
      //使用setFieldsValue实现修改form value的值，不用使用 this.setState({});
      // this.props.model.xxx = 'value';
      // this.props.form.setFieldsValue({xxx: 'value'});
    }
  }

  getPropsByKey = prop => {
    const model = this.props.model || {};
    const finalModel = Object.assign(model, this.props.form.getFieldsValue());
    return finalModel[prop];
  };

  handleUploadImgOnRemove = file => {
    //只上传一文件，这里偷懒
    this.setState({
      imgList: [],
      defaultImgList: null,
    });
  };

  handleUploadImgOnChange = info => {
    const { loadingCallback } = this.props;
    // 状态有：uploading done error removed
    if (info.file.status === 'done') {
      //这个Upload组件比较特殊，这里在OnChange方法手工设置value,不做延迟，就设置不了被覆盖了。
      const response = info.fileList[0].response;
      this.setState({
        imgList: info.fileList,
      });
      if (response) {
        if (response.code === 0) {
          uiUtils.showMessage(`${info.file.name} 文件上传成功.`, 'success');
          setTimeout(() => {
            this.props.form.setFieldsValue({
              headPortraitImg: response.object,
            });
            if (loadingCallback) {
              loadingCallback(false);
            }
          }, 500);
        } else {
          uiUtils.showAlert(response.msg, 'error');
          if (loadingCallback) {
            loadingCallback(false);
          }
        }
      }
    } else if (info.file.status === 'error') {
      if (loadingCallback) {
        loadingCallback(false);
      }
      uiUtils.showMessage(`${info.file.name} 文件上传失败.`, 'error');
    } else if (info.file.status === 'uploading') {
      if (loadingCallback) {
        loadingCallback(true);
      }
    }
  };

  render() {
    const type = this.props.type; //编辑是：新增（add）、编辑(edit)、复制(copy)、还是查看(view)
    const model = this.props.model || {};
    const {
      form,
      form: { getFieldDecorator, getFieldValue, setFieldsValue },
    } = this.props;
    const formItemLayout = {
      labelCol: { span: 5 },
      wrapperCol: { span: 18 }, //5+19=24,少一个栅格
    };
    const colSpanLayout = { md: 12, sm: 24 }; //每一col跨?列
    const rowGutterPxLayout = { md: 24, sm: 16 }; //col之间的间隔?px
    const inputCodeDisabled = {
      disabled: type === 'update',
    };
    const imageCoverProps = {
      action: `${getWebPath('/api/fileUpload')}`,
      name: 'myfile',
      data: { moduleName: 'user', isImage: true, acceptFileExts: 'all' },
      withCredentials: true,
      headers: {
        authorization: 'authorization-text',
      },
      onChange: this.handleUploadImgOnChange,
      onRemove: this.handleUploadImgOnRemove,
      defaultFileList: this.state.defaultImgList,
      multiple: false,
      accept:
        '.jpg, .jpeg, .png, .bmp, ' + //image/*
        '.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel,' + //excel
        '.doc,.docx,,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document, ' + //word
        '.pdf, .txt, .xml',
    };

    const uploadButton = (
      <div>
        <Icon type="plus" />
        <div className="ant-upload-text">上传</div>
      </div>
    );
    //校验文档：https://ant.design/components/form-cn/#%E6%A0%A1%E9%AA%8C%E8%A7%84%E5%88%99
    return (
      <Form layout="horizontal">
        <Row gutter={{ ...rowGutterPxLayout }}>
          <Col {...colSpanLayout}>
            <FormItem label="用户昵称" {...formItemLayout}>
              {type === 'view'
                ? model.username
                : getFieldDecorator('username', {
                    initialValue: model.username,
                    rules: [
                      {
                        required: true,
                        message: '用户昵称必填',
                      },
                      {
                        whitespace: true,
                        message: '不能包含空白符',
                      },
                      {
                        max: 50,
                        message: '最长50个字符',
                      },
                      //rulesRemote('POST', getWebPath() + 'user/checkUsername', {
                      //    roleNameOldValue: this.getPropsByKey('username'),
                      //    IsUsernameAdd: type === 'add',
                      //}),
                    ],
                  })(
                    <Input type="text" autocomplete="off" maxlength={50} placeholder="用户昵称" />
                  )}
            </FormItem>
          </Col>
          {/*<Col {...colSpanLayout}>*/}
          {/*  <FormItem label="密码" {...formItemLayout}>*/}
          {/*    {type === 'view'*/}
          {/*      ? model.password*/}
          {/*      : getFieldDecorator('password', {*/}
          {/*        initialValue: model.password,*/}
          {/*        rules: [*/}
          {/*          {*/}
          {/*            required: true,*/}
          {/*            message: '密码必填',*/}
          {/*          },*/}
          {/*          {*/}
          {/*            whitespace: true,*/}
          {/*            message: '不能包含空白符',*/}
          {/*          },*/}
          {/*          {*/}
          {/*            max: 200,*/}
          {/*            message: '最长200个字符',*/}
          {/*          },*/}
          {/*          //rulesRemote('POST', getWebPath() + 'user/checkPassword', {*/}
          {/*          //    roleNameOldValue: this.getPropsByKey('password'),*/}
          {/*          //    IsPasswordAdd: type === 'add',*/}
          {/*          //}),*/}
          {/*        ],*/}
          {/*      })(*/}
          {/*        <Input*/}
          {/*          type="password"*/}
          {/*          autocomplete="off"*/}
          {/*          maxlength={200}*/}
          {/*          placeholder="密码"*/}
          {/*        />*/}
          {/*      )}*/}
          {/*  </FormItem>*/}
          {/*</Col>*/}
          <Col {...colSpanLayout}>
            <FormItem label="手机号" {...formItemLayout}>
              {type === 'view'
                ? model.mobile
                : getFieldDecorator('mobile', {
                    initialValue: model.mobile,
                    rules: [
                      {
                        required: true,
                        message: '手机号必填',
                      },
                      rulesReg('mobile'),
                    ],
                  })(<Input type="text" autocomplete="off" maxlength={11} placeholder="手机号" />)}
            </FormItem>
          </Col>
          <Col {...colSpanLayout}>
            <FormItem label="用户头像" {...formItemLayout}>
              {type === 'view' ? (
                <img alt="" width={80} src={model.headPortraitImg} />
              ) :
                getFieldDecorator('headPortraitImg', {
                  initialValue: model.headPortraitImg,
                  rules: [
                    {
                      required: true,
                      message: '请上传用户头像',
                    },
                  ],
                })(
                  <div className="clearfix">
                    <Upload {...imageCoverProps} listType="picture-card">
                      {this.state.imgList && this.state.imgList.length >= 1 ? null : uploadButton}
                    </Upload>
                    <Modal
                      visible={this.state.previewImgVisible}
                      footer={null}
                      onCancel={() => this.setState({ previewImgVisible: false })}
                    >
                      <img alt="imgExample" style={{ width: '100%' }} src={this.state.previewImg} />
                    </Modal>
                  </div>
                )
              }
            </FormItem>
          </Col>
          <Col {...colSpanLayout}>
            <FormItem label="个人简介" {...formItemLayout}>
              {type === 'view'
                ? model.signature
                : getFieldDecorator('signature', {
                    initialValue: model.signature,
                    rules: [
                      {
                        required: true,
                        message: '个人简介必填',
                      },
                      {
                        whitespace: true,
                        message: '不能包含空白符',
                      },
                      {
                        max: 50,
                        message: '最长50个字符',
                      },
                      //rulesRemote('POST', getWebPath() + 'user/checkSignature', {
                      //    roleNameOldValue: this.getPropsByKey('signature'),
                      //    IsSignatureAdd: type === 'add',
                      //}),
                    ],
                  })(
                    <TextArea
                      type="text"
                      autocomplete="off"
                      maxlength={50}
                      placeholder="个人简介"
                    />
                  )}
            </FormItem>
          </Col>
          {/*<Col {...colSpanLayout}>*/}
          {/*  <FormItem label="租户id" {...formItemLayout}>*/}
          {/*    {type === 'view'*/}
          {/*      ? model.tenantId*/}
          {/*      : getFieldDecorator('tenantId', {*/}
          {/*        initialValue: model.tenantId,*/}
          {/*        rules: [*/}
          {/*          {*/}
          {/*            required: true,*/}
          {/*            message: '租户id必填',*/}
          {/*          },*/}
          {/*          rulesReg('number'),*/}
          {/*          //rulesRemote('POST', getWebPath() + 'user/checkTenantId', {*/}
          {/*          //    roleNameOldValue: this.getPropsByKey('tenantId'),*/}
          {/*          //    IsTenantIdAdd: type === 'add',*/}
          {/*          //}),*/}
          {/*        ],*/}
          {/*      })(<Input type="text" autocomplete="off" placeholder="租户id,默认1"/>)}*/}
          {/*  </FormItem>*/}
          {/*</Col>*/}
        </Row>
      </Form>
    );
  }
}

/* eslint-disable no-class-assign */
//无更多的绑定， 请用 @Form.create() 注解替换
EditForm = Form.create({})(EditForm);
